<template>
  <div>
    <!-- 所有标签都必须写在一个div中 -->
    <el-row>
      <h1><i class="el-icon-shopping-cart-2"></i>{{sysname}}</h1>
    </el-row>
    <el-row>
      <el-button type="primary" @click="toadd()">添加</el-button>
    </el-row>
    <el-row>
      <el-table :data="list" style="width:100%">
        <el-table-column prop="title" label="标题" width="250" />
        <el-table-column prop="SellingPoint" label="买点" width="200" />
        <el-table-column prop="price" label="价格" align="right" width="80" />
        <el-table-column prop="intro" label="说明" />
        <el-table-column label="[操作]">
          <template slot-scope="scope">
            <el-button @click.native.prevent="toupdate(scope.$index)" type="success" icon="el-icon-edit">修改</el-button>
            <el-button @click.native.prevent="deleteitem(scope.$index,list)" type="danger" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog :title="title1" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form :model="m" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="m.title" />
          </el-form-item>
          <el-form-item label="卖点">
            <el-input v-model="m.SellingPoint" />
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="m.price" />
          </el-form-item>
          <el-form-item label="说明">
            <el-input type="textarea" v-model="m.intro" />
          </el-form-item>
         </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="save()">确定</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  //在这个数据区只允许本组件使用
  export default {
    name: "Item",
    data() {
      return {
        title1:"添加",
        sysname: "二手书交易平台",
        dialogVisible: false,
        isUpdate:false,//使save知道是新增还是修改
        index:0,
        m: {
          title: '',
          SellingPoint: '',
          price: 0,
          intro: ''
        },
        list: [{
            title: "JAVA入门手册",
            SellingPoint: "达内出品",
            price: 88,
            intro: "经典入门书籍，18年修炼"
          },
          {
            title: "java核心技术卷1基础知识 ",
            SellingPoint: "[美] 凯·S.霍斯特曼 著",
            price: 189,
            intro: "Java领域极具影响力和价值的经典著作"
          },
          {
            title: "Java从入门到精通（第5版）",
            SellingPoint: "经久不衰的编程入门三剑客",
            price: 173.20,
            intro: "经久不衰的编程入门三剑客：500多个应用实例+37个典型应用+32个实践练习+77小时教学视频+快速背记手册+海量开发资源库，丛书累计销量超300万册"
          }
        ]
      }
    },
    methods: {
      toadd: function() {
        //展现对话框，要调用数据区数据要加this
        this.title1="添加";
        this.isUpdate=false;
        this.m = {};
        this.dialogVisible = true;
      },
      save: function() {
        //在list数组中新增元素
        if(this.isUpdate){
          this.list.splice(this.index,1,this.m)
        }else{
          this.list.splice(0, 0, this.m);
        }
        this.dialogVisible = false;
      },
      deleteitem: function(index,rows) {
        rows.splice(index,1);
        alert("删除成功！")
      },
      toupdate:function(index){
        this.index=index;
        this.isUpdate=true;
        this.title1="修改";
        this.m=JSON.parse(JSON.stringify(this.list[index]));//通过两次转换，创建新对象，避免相同引用
        this.dialogVisible = true;
      }
    }
  }
</script>

<style>
</style>
